<template>
  <div class="joe_main">
    <a-textarea
      v-model="inputJson"
      placeholder="JSON格式化"
      allow-clear
      :auto-size="{ minRows: 5, maxRows: 20 }"
    />
    <a-alert type="error" v-if="jsonErrFlag" message="请输入正确的JSON格式!" banner style="margin-top: 10px"/>
    <a-button
      type="primary"
      block
      ghost
      @click="checkJson(inputJson)"
      style="margin: 10px auto"
    >
      JSON格式化
    </a-button>

    <a-alert v-if="jsonOkFlag" message="JSON格式化完成！" type="success" style="margin-bottom: 10px"/>

    <json-viewer
      :value="JSON.parse(json)"
      :expand-depth="1"
      boxed
      sort
      expanded
      :show-array-index="false"
      copyable>
      <template slot="copy">
        <i class="el-icon-document-copy" title="复制"></i>
      </template>
    </json-viewer>
  </div>
</template>


<script>
import JsonViewer from 'vue-json-viewer'

export default {

  name: 'compress',
  components: {
    JsonViewer
  },
  data() {
    return {
      json: '{"success": true,"code": 200,"msg": "操作成功","data": ""}',
      inputJson: '',
      jsonErrFlag: false,
      jsonOkFlag: false,
    }
  },
  created() {
  },
  methods: {
    checkJson(value) {
      try {
        if (JSON.parse(value)) {
          this.json = value
          this.jsonErrFlag = false
          this.jsonOkFlag = true
          return true;
        }
      } catch (error) {
        this.jsonErrFlag = true
        this.jsonOkFlag = false
        return false;
      }
      this.jsonOkFlag = false
      this.jsonErrFlag = true
      return false;
    },
  }
}
</script>

<style>


</style>

